<template>
  <div :style="newStyle">
    <span v-if="$attrs.onlyShow">{{getOptionsText(modelValue,resData,props)}}</span>

    <el-select
      v-else
      v-model="formValue"
      v-bind="$attrs"
      style="width:100%"
      @blur="onBlur"
      @focus="onFocus"
      @clear="onClear"
    >
      <el-option
        v-for="item in resData"
        :key="item[props.value]"
        :label="item[props.label]"
        :value="item[props.value]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { getOptionsText } from "../../../utils";

import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-select",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    modelValue: {
      type: [String, Number, Array],
      default: "",
    },
  },
  computed: {
    formValue: {
      get() {
        return this.$attrs.multiple
          ? this.modelValue
            ? this.modelValue.split(",")
            : []
          : this.modelValue;
      },
      set(val) {
        const value = this.$attrs.multiple ? (val ? val.join(",") : "") : val;
        this.$emit("update", value);
        this.onChange(value);
      },
    },
  },
  methods: { getOptionsText },
};
</script>

<style lang="scss" scoped>
</style>